‹

Cores no CSS: Sistemas e Esquemas

Sistemas de cores do CSS

CSS

background: #2563eb;

Conversões

  • RGB:
  • HSL:

CSS

background: rgba(37, 99, 235, 1);

Conversões

  • HEX:
  • HSL:

CSS

background: hsla(221, 83%, 53%, 1);

Conversões

  • HEX:
  • RGB:

Exemplos práticos de propriedades de cor

Alguns usos comuns e visuais de cor no CSS, com trechos de código curtos.

Cor sólida

background-color: crimson;

Gradiente linear

background: linear-gradient(to right, red, blue);

Gradiente radial

background: radial-gradient(circle, red, yellow, green);

Gradiente cônico

background: conic-gradient(from 90deg, red, yellow, green);

Imagem + cor (blend)

background-image: url(img.svg),
  linear-gradient(135deg, rgba(255,0,0,.6), rgba(0,0,255,.6));
background-blend-mode: multiply;
Sombra

Sombras coloridas

.box { box-shadow: 0 6px 24px rgba(37,99,235,.35),
  0 0 0 6px rgba(16,185,129,.25); }
.text { text-shadow: 0 2px 0 rgba(239,68,68,.8),
  0 4px 12px rgba(59,130,246,.5); }

Filtros

.el { filter: hue-rotate(90deg) brightness(1.2); }

Máscara (mask-image)

mask-image: radial-gradient(circle, #fff 60%, transparent 61%);
-webkit-mask-image: radial-gradient(circle, #fff 60%, transparent 61%);

Recorte (clip-path)

clip-path: polygon(50% 5%, 61% 35%, 95% 35%,
  68% 57%, 79% 91%, 50% 70%, 21% 91%,
  32% 57%, 5% 35%, 39% 35%);
Gradiente no texto

Texto com gradiente

.txt {
  background: linear-gradient(90deg, #ef4444, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

accent-color

input[type="checkbox"], input[type="range"] {
  accent-color: #6366f1;
}

Círculo cromático e esquemas de cores

CSS (variáveis sugeridas)

:root {
  --color-1: hsl(221 80% 50%);
  --color-2: hsl(341 80% 50%);
  --color-3: hsl(101 80% 50%);
}
Exemplo

Título com a cor 1

Texto com a cor 3 e realces com a cor 2. Ajuste o esquema para ver a harmonia em ação.